<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>可缩放和移动的弹窗</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 20px;
            background-color: #f5f5f5;
            min-height: 100vh;
            position: relative;
            overflow: hidden; /* 防止body滚动影响计算 */
        }
        
        #modal {
            position: absolute;
            min-width: 300px;
            min-height: 200px;
            max-width: calc(100vw - 40px); /* 限制最大宽度 */
            max-height: calc(100vh - 40px); /* 限制最大高度 */
            background-color: white;
            border-radius: 5px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
            overflow: auto;
            resize: both;
            display: none;
            z-index: 1000;
        }
        
        #modal-header {
            padding: 10px 15px;
            background-color: #3498db;
            color: white;
            cursor: move;
            user-select: none;
        }
        
        #modal-content {
            padding: 15px;
            min-height: calc(200px - 40px);
        }
        
        #modal-close {
            float: right;
            cursor: pointer;
            font-weight: bold;
        }
        
        #open-modal {
            padding: 10px 20px;
            background-color: #3498db;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 16px;
        }
        
        #open-modal:hover {
            background-color: #2980b9;
        }
    </style>
</head>
<body>
    <button id="open-modal">打开弹窗</button>
    
    <div id="modal">
        <div id="modal-header">
            <span>可移动和缩放的弹窗</span>
            <span id="modal-close">×</span>
        </div>
        <div id="modal-content">
            <h2>弹窗内容</h2>
            <p>这是一个可以移动和缩放的弹窗示例。</p>
            <p>拖拽标题栏可以移动弹窗位置。</p>
            <p>拖拽右下角可以调整弹窗大小。</p>
            <p>点击右上角的×可以关闭弹窗。</p>
        </div>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const modal = document.getElementById('modal');
            const modalHeader = document.getElementById('modal-header');
            const closeBtn = document.getElementById('modal-close');
            const openBtn = document.getElementById('open-modal');
            
            // 打开弹窗
            openBtn.addEventListener('click', function() {
                modal.style.display = 'block';
                centerModal();
            });
            
            // 关闭弹窗
            closeBtn.addEventListener('click', function() {
                modal.style.display = 'none';
            });
            
            // 拖拽移动功能
            let isDragging = false;
            let offsetX, offsetY;
            
            modalHeader.addEventListener('mousedown', function(e) {
                if (e.target === closeBtn) return;
                isDragging = true;
                const rect = modal.getBoundingClientRect();
                offsetX = e.clientX - rect.left;
                offsetY = e.clientY - rect.top;
                e.preventDefault();
            });
            
            document.addEventListener('mousemove', function(e) {
                if (!isDragging) return;
                
                const modalRect = modal.getBoundingClientRect();
                const bodyRect = document.body.getBoundingClientRect();
                
                // 计算新位置并限制边界
                let x = e.clientX - offsetX;
                let y = e.clientY - offsetY;
                
                x = Math.max(0, Math.min(bodyRect.width - modalRect.width, x));
                y = Math.max(0, Math.min(bodyRect.height - modalRect.height, y));
                
                modal.style.left = x + 'px';
                modal.style.top = y + 'px';
                modal.style.transform = 'none';
            });
            
            document.addEventListener('mouseup', function() {
                isDragging = false;
            });
            
            // 监听resize事件限制缩放范围
            let isResizing = false;
            let startWidth, startHeight, startX, startY;
            
            modal.addEventListener('mousedown', function(e) {
                if (e.target === modalHeader) {
                    e.stopPropagation();
                    return;
                }
                
                // 检查是否在右下角resize区域
                const rect = modal.getBoundingClientRect();
                const resizeArea = 20; // 右下角resize区域大小
                const inResizeArea = 
                    e.clientX > rect.right - resizeArea && 
                    e.clientY > rect.bottom - resizeArea;
                
                if (inResizeArea) {
                    isResizing = true;
                    startWidth = rect.width;
                    startHeight = rect.height;
                    startX = e.clientX;
                    startY = e.clientY;
                    e.preventDefault();
                }
            });
            
            document.addEventListener('mousemove', function(e) {
                if (!isResizing) return;
                
                const bodyRect = document.body.getBoundingClientRect();
                const modalRect = modal.getBoundingClientRect();
                
                // 计算新尺寸
                let newWidth = startWidth + (e.clientX - startX);
                let newHeight = startHeight + (e.clientY - startY);
                
                // 限制最小尺寸
                newWidth = Math.max(300, newWidth);
                newHeight = Math.max(200, newHeight);
                
                // 限制最大尺寸（不超过body）
                newWidth = Math.min(bodyRect.width - modalRect.left, newWidth);
                newHeight = Math.min(bodyRect.height - modalRect.top, newHeight);
                
                // 应用新尺寸
                modal.style.width = newWidth + 'px';
                modal.style.height = newHeight + 'px';
                
                // 检查是否需要调整位置（防止超出右/下边界）
                const newRight = modalRect.left + newWidth;
                const newBottom = modalRect.top + newHeight;
                
                if (newRight > bodyRect.width) {
                    modal.style.width = (bodyRect.width - modalRect.left) + 'px';
                }
                if (newBottom > bodyRect.height) {
                    modal.style.height = (bodyRect.height - modalRect.top) + 'px';
                }
            });
            
            document.addEventListener('mouseup', function() {
                isResizing = false;
            });
            
            // 窗口大小改变时调整弹窗
            window.addEventListener('resize', function() {
                if (modal.style.display === 'block') {
                    const modalRect = modal.getBoundingClientRect();
                    const bodyRect = document.body.getBoundingClientRect();
                    
                    // 如果弹窗超出边界，调整位置和大小
                    if (modalRect.right > bodyRect.right || 
                        modalRect.bottom > bodyRect.bottom) {
                        adjustModalPosition();
                    }
                }
            });
            
            // 居中弹窗
            function centerModal() {
                const modalRect = modal.getBoundingClientRect();
                const bodyRect = document.body.getBoundingClientRect();
                
                const x = Math.max(0, (bodyRect.width - modalRect.width) / 2);
                const y = Math.max(0, (bodyRect.height - modalRect.height) / 2);
                
                modal.style.left = x + 'px';
                modal.style.top = y + 'px';
                modal.style.transform = 'none';
            }
            
            // 调整弹窗位置和大小确保在body内
            function adjustModalPosition() {
                const modalRect = modal.getBoundingClientRect();
                const bodyRect = document.body.getBoundingClientRect();
                
                // 调整宽度
                let newWidth = modalRect.width;
                if (modalRect.right > bodyRect.right) {
                    newWidth = bodyRect.width - modalRect.left;
                }
                newWidth = Math.max(300, Math.min(bodyRect.width, newWidth));
                
                // 调整高度
                let newHeight = modalRect.height;
                if (modalRect.bottom > bodyRect.bottom) {
                    newHeight = bodyRect.height - modalRect.top;
                }
                newHeight = Math.max(200, Math.min(bodyRect.height, newHeight));
                
                // 应用新尺寸
                modal.style.width = newWidth + 'px';
                modal.style.height = newHeight + 'px';
                
                // 调整位置
                let newLeft = modalRect.left;
                let newTop = modalRect.top;
                
                if (modalRect.right > bodyRect.right) {
                    newLeft = bodyRect.width - newWidth;
                }
                if (modalRect.bottom > bodyRect.bottom) {
                    newTop = bodyRect.height - newHeight;
                }
                
                newLeft = Math.max(0, newLeft);
                newTop = Math.max(0, newTop);
                
                modal.style.left = newLeft + 'px';
                modal.style.top = newTop + 'px';
                modal.style.transform = 'none';
            }
        });
    </script>
</body>
</html>